<template>
  <div class="layout">
    <div class="header">
      <el-form
        :inline="true"
        :model="formInline"
        class="demo-form-inline"
        label-width="68px"
      >
        <el-form-item label="活动标题">
          <el-input
            v-model="formInline.activityTitle"
            placeholder="请输入活动标题"
          ></el-input>
        </el-form-item>
        <el-form-item label="活动简介">
          <el-input
            v-model="formInline.activityIntroduce"
            placeholder="请输入活动简介"
          ></el-input>
        </el-form-item>
        <el-form-item label="是否发布" prop="isRelease">
          <el-radio-group v-model="formInline.isRelease">
          <el-radio  label="1">是</el-radio>
          <el-radio   label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否外链" prop="isLink">
          <el-radio-group v-model="formInline.isLink">
          <el-radio  label="1">是</el-radio>
          <el-radio  label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit" icon="el-icon-search"
            >搜索</el-button
          >
          <el-button icon="el-icon-refresh" @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>
      <el-row>
        <el-col :span="1.5">
          <el-button
            type="primary"
            plain
            icon="el-icon-plus"
            size="mini"
            @click="GenTable"
            >新增</el-button
          >
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="success"
            plain
            icon="el-icon-edit"
            size="mini"
            @click="handleUpdat()"
            >修改</el-button
          >
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="danger"
            plain
            icon="el-icon-delete"
            size="mini"
            @click="handleDelete"
            >删除</el-button
          >
        </el-col>

        <el-button icon="el-icon-search" circle class="search" @click="onSubmit"></el-button>
        <el-button icon="el-icon-refresh" circle class="refresh"  @click="onReset"></el-button>
      </el-row>
    </div>
    <div class="wrapper">
      <el-table
        :data="tableData"
        style="width: 100%"
        v-loading="loading"
        :default-sort="{ prop: 'date', order: 'descending' }"
        @select="sss()"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" align="center">
        </el-table-column>
        <el-table-column prop="activityTitle" label="活动标题" align="center">
        </el-table-column>
        <el-table-column
          prop="activityIntroduce"
          label="活动简介"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="activityContent" label="活动内容" align="center">
        <template slot-scope="scope">
            <span v-html="scope.row.activityContent"></span>
          </template> 
        </el-table-column>
        <el-table-column prop="activitySign" label="活动标记" align="center">
        </el-table-column>
        <el-table-column prop="coverUrl" label="活动封面" align="center">
          <template slot-scope="scope">
            <el-image :src="baseUrl + scope.row.coverUrl"></el-image>
          </template>
        </el-table-column>
        <el-table-column prop="isRelease" label="是否发布" align="center">
          <template v-slot="scope1">
            <el-switch
              v-model="scope1.row.isRelease"
              active-value="1"
              inactive-value="0"
              @change="change(scope1.row)"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="isLink" label="是否外链" align="center">
          <template v-slot="scope2">
            <el-switch v-model="scope2.row.isLink"
             active-value="1"
              inactive-value="0"
              @change="change(scope2.row)"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="link" label="链接" align="center">
        </el-table-column>
        <el-table-column prop="ramark" label="备注" align="center">
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleUpdate(scope.row)"
              >修改</el-button
            >
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDelete(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="tableData.offset"
        background
        :page-sizes="[2, 5, 7, 10]"
        :page-size="tableData.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
        <!-- <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getUserList"
    /> -->
  </div>
</template>

<script>
import {
  getActivity,
  addActivity,
  uptActivity,
  delActivity,
} from "../../../api/api/api";
import "highlight.js/styles/github-gist.css";
import { getToken } from "../../../utils/auth";
export default {
  name: "activity",
  created() {
    this.getUserList();
  },
  data() {
    return {
      baseUrl: process.env.VUE_APP_BASE_API,
      headers: {
        Authorization: "Bearer " + getToken(),
      },
      //分页
      currentPage4: 1,
      total:0,

      //排序
      num: 1,
      //备注
      textarea: "",
      //开关
      curRowObject:{},

      suju:'',
    
      queryParams: {
        pageNum: 1,
        pageSize: 10,},
      formInline: {
        activityTitle: "",
        activityIntroduce: "",
        isRelease: "",
        isLink: "",
      },
      formLabelWidth: "120px",
      loading: false,
      tableData: [
        {
          activityId: "",
          activityTitle: "",
          activityIntroduce: "",
          activityContent: "",
          activitySign: "",
          coverUrl: "",
          isRelease: null,
          isLink: null,
          link: "",
          ramark: "",


          
          // limit: 5,
          // offset: 1,
        },
      ],

      multipleSelection: [],
    };
  },

  methods: {

    
    change(row){
      
      this.curRowObject= row
      console.log(row);
      console.log("nnnn",this.tableData);

      this.updateUser()
    },
    //查询
    getUserList() {
      this.loading = true;
      getActivity(this.formInline).then((res) => {
        console.log('dasd',res.rows);
        this.tableData = res.rows;
        this.loading = false;
        this.total =res.rows.length
        // console.log(res.rows.length);
      });
    },
    //删除
    delUser(ids) {
      delActivity(ids).then((res) => {
        this.getUserList();
      });
    },
    onSubmit() {
      // console.log("submit!", this.formInline);
      // const filterPersons = this.tableData.filter(
      //   (formInline) =>
      //     formInline.tip == this.formInline.tip ||
      //     formInline.release == this.formInline.release
      // );
      // this.tableData = filterPersons;
      this.getUserList();
    },
    //重置
    onReset() {
      (this.formInline = {
        activityTitle: "",
        activityIntroduce: "",
        isRelease: "",
        isLink: "",
      }),
        this.getUserList();
    },
    //修改接口
    updateUser() {
      
      uptActivity(this.curRowObject).then((res) => {
        console.log(res);
         this.getUserList();
      })},
    //修改
    handleUpdate(row) {
      // localStorage.removeItem("row");
      console.log('asdasdasda',row);
      this.$router.push({
        path: "/homepageManagement/homepageManagement/Activity/add",
        query: {
          id: row,
        },

      });
      // this.$router.push("/homepageManagement/homepageManagement/Activity/add");
    },
    handleUpdat() {
      // localStorage.removeItem("row");

      this.$router.push({
        path: "/homepageManagement/homepageManagement/Activity/add",
        query: {
          ww: this.shuju,
        },

      });
      // this.$router.push("/homepageManagement/homepageManagement/Activity/add");
    },
    sss(selection, row) {
      console.log(selection, row);
    },
    //删除
    handleDelete(row) {
      console.log("ss", row);

      // this.tableData.splice(row, 1);
      this.$confirm("是否删除轮播图信息?", "系统提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          let ids;
          if (this.multipleSelection.length) {
            ids = this.multipleSelection;
            console.log("qqq", ids);
          } else {
            if (row) {
              ids = row.activityId;
            }
          }
          this.delUser(ids);
          // this.tableData.splice(index, 1);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //新增
    GenTable() {
      // this.tableData.push({ ...this.eidtForm });
      this.$router.push("/homepageManagement/homepageManagement/Activity/add");
    },
    //排序
    handleChange(value) {
      console.log("de", value);
    },
    //分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.tableData.limit = val
      this.getUserList()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.tableData.offset = val
      this.getUserList()

    },
    //勾选
    handleSelectionChange(val = []) {
      this.shuju = val[0]
      this.multipleSelection = [];
      val.forEach((item) => this.multipleSelection.push(item.activityId));
      console.log(val);
    },
  },
};
</script>

<style scoped>
.headtop {
  width: 200px;
  background: #666;
  position: fixed;
  top: 0;
  bottom: 0;
}
.comtant {
  margin-left: 200px;
}
.layout {
  margin-top: 20px;
}
.el-button--success.is-plain {
  margin-left: 10px;
}
.el-button--primary.is-plain {
  margin-left: 20px;
}
.el-button--danger.is-plain {
  margin-left: 10px;
}
::v-deep .el-form-item__label {
  font-weight: 700px;
}
.el-button.is-circle {
  padding: 7px;
}
.refresh {
  margin-left: 10px;
}
.search {
  margin-left: 960px;
}
::v-deep .el-pagination__total {
  margin-left: 881px;
}
.el-upload__text {
  height: 100px;
  width: 100px;
  border: solid 1px black;
}
.el-upload__text img {
  height: 100px;
  width: 100px;
  border: solid 1px black;
}
::v-deep .el-image__inner {
  width: 15px !important;
}
</style>